<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/PageSwitch.css">
	<style type="text/css">
                 *{
                       padding: 0;
                       margin: 0;
                  }
                  html,body{
                  	height: 100%;
                  	overflow: hidden;
                  }
                  #container,.selections,.selection{
                  	height: 100%;
                  }
                  
                  .selection img{
                  	width: 100%;
                  	height: 100%;
                  }

                    #selection0,
                    #selection1,
                    #selection2,
                    #selection3,
                    #selection4{
                    	background-color: #000;
                    	background-size: cover;
                    	background-position: 50% 50%;
                    	text-align: center;
                        color: grey;
                    }
                    #selection0{
						background-image: url(images/11.jpg);
                    }
                    #selection1{
						background-image: url(images/12.jpg);
                    }
                    #selection2{
						background-image: url(images/13.jpg);
                    }
                     #selection3{
						background-image: url(images/14.jpg);
                     }
                     #selection4{
						background-image: url(images/15.jpg);
                     }  
                     .left{
                     	float: left;
                     }
                     h1{
                     	font-size: 6em;
                     	font-weight: normal;
                     	transform:translateX(-100%); 
                     }
                     p{
                     	font-size: 2em;
                     	margin: 0.5em 0 2em 0; 
                     }
                     .intro{
                     	position: absolute;
                     	top: 50%;
                     	width: 100%
                     	-webkit-transform:translateY(-50%);
                     	transform:translateY(-50%);
                     	text-align: center; 
                     }

                      
                      
                      #selection0 .title{
                      	-webkit-transform:translateX(-100%);
                        transform:translateX(-100%);
                        -webkit-animation:sectitle0 1s ease-in-out 100ms forwards;
                        animation:sectitle0 1s ease-in-out 100ms forwards; 
                      }

                      #selection0 p{
                      	-webkit-transform:translateX(100%);
                        transform:translateX(100%);
                        -webkit-animation:sec0 1s ease-in-out 100ms forwards;
                        animation:sec0 1s ease-in-out 100ms forwards; 
                      }

                      @-webkit-keyfarmes sectitle0{
                      	0%{
                      		-webkit-transform:translateX(-100%);
                            transform:translateX(-100%);
                      	}
                      	100%{
                      		-webkit-transform:translateX(0);
                            transform:translateX(0);
                      	}
                      }
                      @keyfarmes sectitle0{
                      	0%{
                      		-webkit-transform:translateX(-100%);
                            transform:translateX(-100%);
                      	}
                      	100%{
                      		-webkit-transform:translateX(0);
                            transform:translateX(0);
                      	}
                      }

                      @-webkit-keyfarmes sec0{
                      	0%{
                      		-webkit-transform:translateX(100%);
                            transform:translateX(100%);
                      	}
                      	100%{
                      		-webkit-transform:translateX(0);
                            transform:translateX(0);
                      	}
                      }
                      @keyfarmes sec0{
                      	0%{
                      		-webkit-transform:translateX(100%);
                            transform:translateX(100%);
                      	}
                      	100%{
                      		-webkit-transform:translateX(0);
                            transform:translateX(0);
                      	}
                      }
                     .slide{
                     	transform:translateX(0);
                     	transition:all ease-in-out 500ms; 
                     }  
	</style>
</head>
<body>
	<div id="container" data-PageSwitch>
		<div class="selections" style="position:relative">
                                    <div class="selection" id="selection0">
                                    	<!--<img src="images/11.jpg" />-->
                                    </div>
                                    <div class="selection" id="selection1">
                                    	<!--<img src="images/12.jpg" />-->
                                    </div>
                                    <div class="selection" id="selection2">
                                    	<!--<img src="images/13.jpg" />-->
                                    </div>
                                    <div class="selection" id="selection3">
                                    	<!--<img src="images/14.jpg" />-->
                                    </div>
                                    <div class="selection" id="selection4">
                                    	<!--<img src="images/14.jpg" />-->
                                    </div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="js/PageSwitch.js"></script>
	<script type="text/javascript">
     $("#container").PageSwitch({
     	duration:1000
     });
	</script>
</body>
</html>